<template>
	<view class="pharma-home">
		<!-- 状态栏 -->
		<view class="status_bar" :style="{ height: `${statusBarHeight}px` }"></view>
		
		<!-- 顶部搜索区域 -->
		<view class="search-header">
			<view class="header-top">
				<view class="company-info">
					<text class="company-name">{{title || '医药平台'}}</text>
					<text class="welcome-text">专业药品采购平台</text>
				</view>
				<view class="header-actions">
					<view class="message-btn" @click="goToMessages">
						<tn-icon name="comment" size="20" color="#666"/>
						<tn-badge :value="messageCount" v-if="messageCount > 0" absolute/>
					</view>
				</view>
			</view>
			
			<!-- 药品搜索栏 -->
			<view class="search-section">
				<view class="search-container">
					<tn-icon name="search" size="18" color="#999"/>
					<input 
						class="search-input"
						v-model="searchValue"
						placeholder="搜索药品名称/通用名/厂家"
						placeholder-style="color: #999"
						@input="searchInputEvent"
						@confirm="searchBtnClickEvent"
					/>
					<view class="search-btn" @click="searchBtnClickEvent">搜索</view>
				</view>
			</view>
		</view>

		<!-- 主内容区域 -->
		<scroll-view class="main-content" scroll-y="true">
			<!-- 轮播图区域 -->
			<view class="banner-section" v-if="swiperData.length > 0">
				<tn-swiper
					v-model="currentSwiperIndex"
					:data="swiperData"
					width="calc(100vw - 20rpx)"
					height="160rpx"
					border-radius="8"
					:indicator="true"
					indicator-position="bottom-center"
				>
					<template #default="{ data }">
						<view class="banner-item">
							<image class="banner-image" :src="data" mode="aspectFill"/>
						</view>
					</template>
				</tn-swiper>
			</view>

			<!-- 快捷功能栏 -->
			<view class="quick-actions">
				<view class="action-item" @click="createNewOrder">
					<view class="action-icon new-order">
						<tn-icon name="plus-circle" size="24" color="#fff"/>
					</view>
					<text class="action-text">新建订单</text>
				</view>
				<view class="action-item" @click="searchCustomer">
					<view class="action-icon customers">
						<tn-icon name="user-group" size="24" color="#fff"/>
					</view>
					<text class="action-text">客户管理</text>
				</view>
				<view class="action-item" @click="viewInventory">
					<view class="action-icon inventory">
						<tn-icon name="package" size="24" color="#fff"/>
					</view>
					<text class="action-text">库存查询</text>
				</view>
				<view class="action-item" @click="viewReports">
					<view class="action-icon reports">
						<tn-icon name="chart-bar" size="24" color="#fff"/>
					</view>
					<text class="action-text">销售统计</text>
				</view>
			</view>

			<!-- 治疗领域分类 -->
			<view class="category-section">
				<view class="section-header">
					<text class="section-title">治疗领域</text>
					<text class="section-subtitle">按疾病类型快速找药</text>
				</view>
				<view class="category-grid">
					<view 
						class="category-item"
						v-for="(category, index) in saleDeptData"
						:key="index"
						@click="saleDeptClick(category.saledeptid)"
					>
						<view class="category-icon">
							<image class="category-img" :src="category.imgUrl" mode="aspectFill"/>
						</view>
						<text class="category-name">{{category.saleDeptName}}</text>
					</view>
				</view>
			</view>

			<!-- 通知公告 -->
			<view class="notice-section" v-if="noticeData.length > 0">
				<view class="notice-header" @click="toNavigateNotice">
					<tn-icon name="volume" size="16" color="#ff6b35"/>
					<view class="notice-content">
						<tn-notice-bar 
							:data="noticeData" 
							direction="horizontal"
							:loop="true"
							style="background: transparent; color: #333; font-size: 24rpx;"
						/>
					</view>
				</view>
			</view>

			<!-- 限时促销 -->
			<view class="promotion-section" v-if="promData.length > 0">
				<view class="section-header">
					<view class="header-left">
						<tn-icon name="flash" size="18" color="#ff4757"/>
						<text class="section-title">限时促销</text>
					</view>
					<text class="view-more" @click="viewAllPromotions">更多 ></text>
				</view>
				<scroll-view class="promotion-scroll" scroll-x="true" show-scrollbar="false">
					<view class="promotion-list">
						<view 
							class="promotion-card"
							v-for="(prom, index) in promData.slice(0, 5)"
							:key="index"
							@click="promClick(prom)"
						>
							<view class="promo-badge">特价</view>
							<text class="promo-title">{{prom.promName}}</text>
							<text class="promo-desc">限时特惠，数量有限</text>
						</view>
					</view>
				</scroll-view>
			</view>

			<!-- 热销药品 -->
			<view class="products-section" v-if="recommendData.length > 0">
				<view class="section-header">
					<view class="header-left">
						<tn-icon name="fire" size="18" color="#ff6b35"/>
						<text class="section-title">热销药品</text>
					</view>
					<text class="view-more" @click="viewAllProducts">更多 ></text>
				</view>
				<view class="products-grid">
					<view 
						class="product-card"
						v-for="(medicine, index) in recommendData.slice(0, 4)"
						:key="index"
						@click="saleDeptImageClick(medicine)"
					>
						<view class="product-image-wrapper">
							<image 
								class="product-image" 
								:src="medicine.imgUrl" 
								mode="aspectFill"
								@error="imgerror(index)"
							/>
							<view class="hot-badge">热销</view>
						</view>
						<view class="product-info">
							<text class="product-name">{{medicine.goodsName}}</text>
							<text class="product-spec">{{medicine.goodsspec}}</text>
							<text class="product-manufacturer">{{medicine.manufacturer}}</text>
							<view class="price-section">
								<text class="product-price">¥{{medicine.retailP}}</text>
								<text class="product-unit">{{medicine.goodsSpec}}</text>
							</view>
							<view class="add-cart-btn" @click.stop="quickAddToCart(medicine)">
								<tn-icon name="plus" size="14" color="#fff"/>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 服务保障 -->
			<view class="service-section">
				<view class="service-grid">
					<view class="service-item">
						<tn-icon name="shield-check" size="20" color="#10b981"/>
						<text class="service-text">GSP认证</text>
					</view>
					<view class="service-item">
						<tn-icon name="truck" size="20" color="#3b82f6"/>
						<text class="service-text">快速配送</text>
					</view>
					<view class="service-item">
						<tn-icon name="headphones" size="20" color="#8b5cf6"/>
						<text class="service-text">专业服务</text>
					</view>
					<view class="service-item">
						<tn-icon name="award" size="20" color="#f59e0b"/>
						<text class="service-text">品质保证</text>
					</view>
				</view>
			</view>

			<!-- 底部安全区域 -->
			<view class="bottom-safe"></view>
		</scroll-view>
	</view>
</template>

<script setup>
	import { ref,reactive,onMounted  } from "vue"
	import { postCall,postNoCall  } from '@/api/index.js'
	import { EventBus } from '@/mitt/EventBus.js';
	import { createParams } from '@/utils/utils.js'
	import {userAllDataStore} from '@/stores'
	
	const store = userAllDataStore();
	
	const statusBarHeight = ref(uni.getSystemInfoSync().statusBarHeight || 0)
	const headerClass = ref('');
	const swiperData = reactive([]);
	const saleDeptData = reactive([]);
	const promData = reactive([]);
	const recommendData = reactive([]);
	const procName = "PROC_APP_DO_HOME";
	const messageCount = ref(5)
	
	onMounted(() => {
		// 在页面展示时将页面滚动到顶部
	    uni.pageScrollTo({
			scrollTop: 0,
			duration: 0
		});
		
		if (process.env.UNI_PLATFORM === 'app-plus' || process.env.UNI_PLATFORM === 'h5' || process.env.UNI_PLATFORM==='app') {
			headerClass.value = 'header-class-app'; // 应用App平台和H5的样式
		} else if (process.env.UNI_PLATFORM === 'mp-weixin') {
			headerClass.value = 'header-class-wechat'; // 应用微信小程序的样式
		}	
		doGetSwiper();
		doGetSaleDept();
		doGetProm();
		doGetRecommend();
		doGetTitle();
		doGetNotice();
		doGetShoppingCount();
		
		const httpUrl = uni.getStorageSync("HTTP");
		noneGoodsImageUrl.value  =  httpUrl+'/static/none.png';
		
		EventBus.on('shoppingCount', (objParam) => {
			doGetShoppingCount();
		});
		
	});
	
	let noneGoodsImageUrl = ref("");
	
	const imgerror = (index)=>{
		if(recommendData.length>0){
			recommendData[index].imgUrl = noneGoodsImageUrl.value;
		}
	}
	
	let noticeData = reactive([]);
	let mainColor = ref(uni.getStorageSync("MCOLOR"));
	
	
	let doGetNotice = () =>{
		let params = {};
		params["P_PROC_NAME"] = "PROC_APP_DO_NOTICE";
		params["P_ACTION"] = "TITLEARR";
		postNoCall(params).then(res=>{
			if(res){
				if(res.code===200){
					for(let i=0;i<res.data.DATASET.length;i++){
						noticeData.push(res.data.DATASET[i].title);
					}
				}
			}
		})
	};
	
	let pageInfo = {
		P_PAGE : 1,
		P_PAGESIZE : 20
	}
	
	let saleDeptClick = (val) =>{
		uni.setStorageSync("SALEDEPT",val);
		uni.setStorageSync("index",1);
		uni.navigateTo({
			url: '/pages/index/index'
		})
	}
	
	let saleDeptImageClick = (val) =>{
		uni.setStorageSync("SALEDEPT",val.saledeptid);
		uni.setStorageSync("index",1);
		uni.setStorageSync("GOODS",val.goodsid);
		uni.navigateTo({
			url: '/pages/index/index'
		})
	}
	
	let toNavigateNotice = ()=>{
		uni.navigateTo({
			url: '/pages/notice/notice'
		})
	}
	
	let doGetSwiper = () =>{
		let params = {};
		params["P_PROC_NAME"] = procName;
		params["P_ACTION"] = "SWIPER";
		postNoCall(params).then(res=>{
			if(res){
				if(res.code===200){
					for(let i=0;i<res.data.DATASET.length;i++){
						swiperData.push(res.data.DATASET[i].imgUrl);
					}
				}
			}
			
		})
	};
	let doGetSaleDept = () =>{
		let params = {};
		params["P_PROC_NAME"] = procName;
		params["P_ACTION"] = "SALEDEPT";
		postNoCall(params).then(res=>{
			if(res){
				if(res.code===200){
					Object.assign(saleDeptData,res.data.DATASET)
				}
			}
			
		})
	}
	let promClick = (val) =>{
		
		uni.setStorageSync("PROM",val);
		if(val.istj=='Y'){
			uni.navigateTo({
				url: '/pages/home/prom_tj'
			})
		}else{
			uni.navigateTo({
				url: '/pages/home/prom'
			})
		}
		
	}
	let doGetProm = () =>{
		let params = {};
		params["P_PROC_NAME"] = procName;
		params["P_ACTION"] = "PROMOTION";
		postNoCall(params).then(res=>{
			if(res){
				if(res.code===200){
					Object.assign(promData,res.data.DATASET);
				}
			}
			
		})
	}
	
	let doGetShoppingCount = () =>{
		let params = {};
		params["P_PROC_NAME"] = "PROC_APP_DO_SHOPPING";
		params["P_ACTION"] = "QUERYALLCOUNT";
		if(uni.getStorageSync('token')){
			postCall(params).then(res=>{
				if(res){
					if(res.code===200){
						if(res.data.DATASET.length>0){
							store.state.shopingBadge = res.data.DATASET[0].sumcount;
						}
						
					}
				}
				
			})
		}
		
	}

	let doGetRecommend = () =>{
		let params = {};
		params["P_PROC_NAME"] = procName;
		params["P_ACTION"] = "RECOMMEND";
		postNoCall(Object.assign(params, createParams(uni.getStorageSync("USERINFO"))) ).then(res=>{
			if(res){
				if(res.code===200){
					Object.assign(recommendData,res.data.DATASET)
				}
			}
			
		})
	}
	
	const title = ref('');
	let doGetTitle = () =>{
		let params = {};
		params["P_PROC_NAME"] = procName;
		params["P_ACTION"] = "TITLE";
		postNoCall(params).then(res=>{
			if(res){
				if(res.code===200){
					title.value = res.data.DATASET[0].title;
				}
			}
			
		})
	}
	
	const searchValue = ref("")
	const currentSwiperIndex = ref(0)
	const searchInputEvent = () =>{
		
	}
	const searchBtnClickEvent = () =>{
		if(searchValue.value.trim()) {
			uni.navigateTo({
				url: `/pages/classify/search?keyword=${encodeURIComponent(searchValue.value)}`
			})
		}
	}

	// 快捷操作方法
	const createNewOrder = () => {
		uni.navigateTo({
			url: '/pages/classify/client'
		})
	}

	const searchCustomer = () => {
		uni.navigateTo({
			url: '/pages/classify/client'
		})
	}

	const viewInventory = () => {
		uni.navigateTo({
			url: '/pages/index/index'
		})
	}

	const viewReports = () => {
		uni.navigateTo({
			url: '/pages/report/clientArReport'
		})
	}

	// 消息和通知
	const goToMessages = () => {
		uni.showToast({
			title: '消息功能开发中',
			icon: 'none'
		})
	}

	// 促销活动相关方法  
	const viewAllPromotions = () => {
		uni.showToast({
			title: '查看全部促销',
			icon: 'none'
		})
	}

	// 商品相关方法
	const viewAllProducts = () => {
		uni.navigateTo({
			url: '/pages/index/index'
		})
	}

	const quickAddToCart = (product) => {
		uni.showToast({
			title: `已添加 ${product.goodsName}`,
			icon: 'success'
		})
	}

	let onSlide = () =>{
		console.log(11111111111111)
		uni.navigateBack();
	}
	
	
</script>

<style scoped>
/* 基础样式 */
.pharma-home {
	min-height: 100vh;
	background: #f8fafc;
}

/* 顶部搜索区域 */
.search-header {
	background: #fff;
	padding: 12rpx 20rpx 16rpx;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
}

.header-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12rpx;
}

.company-info {
	flex: 1;
}

.company-name {
	font-size: 28rpx;
	font-weight: 700;
	color: #2c3e50;
	display: block;
	margin-bottom: 2rpx;
}

.welcome-text {
	font-size: 20rpx;
	color: #64748b;
}

.header-actions {
	display: flex;
	align-items: center;
}

.message-btn {
	position: relative;
	width: 40rpx;
	height: 40rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: #f1f5f9;
}

.search-section {
	width: 100%;
}

.search-container {
	display: flex;
	align-items: center;
	background: #f8fafc;
	border-radius: 24rpx;
	padding: 8rpx 16rpx;
	gap: 12rpx;
	border: 2rpx solid transparent;
	transition: all 0.3s ease;
}

.search-container:focus-within {
	border-color: #3b82f6;
	background: #fff;
	box-shadow: 0 0 0 6rpx rgba(59, 130, 246, 0.1);
}

.search-input {
	flex: 1;
	font-size: 26rpx;
	color: #2c3e50;
	height: 40rpx;
	line-height: 40rpx;
}

.search-btn {
	background: linear-gradient(135deg, #3b82f6, #1e40af);
	color: #fff;
	padding: 6rpx 16rpx;
	border-radius: 16rpx;
	font-size: 22rpx;
	font-weight: 600;
	transition: all 0.3s ease;
}

.search-btn:active {
	transform: scale(0.95);
}

/* 主内容区 */
.main-content {
	flex: 1;
	background: #f8fafc;
}

/* 轮播图区域 */
.banner-section {
	padding: 12rpx 10rpx;
}

.banner-item {
	width: 100%;
	height: 160rpx;
	border-radius: 8rpx;
	overflow: hidden;
}

.banner-image {
	width: 100%;
	height: 100%;
	border-radius: 8rpx;
}

/* 快捷功能栏 */
.quick-actions {
	background: #fff;
	margin: 0 10rpx 12rpx;
	border-radius: 8rpx;
	padding: 20rpx;
	display: flex;
	justify-content: space-between;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
}

.action-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8rpx;
}

.action-icon {
	width: 48rpx;
	height: 48rpx;
	border-radius: 12rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.action-icon.new-order {
	background: linear-gradient(135deg, #10b981, #059669);
}

.action-icon.customers {
	background: linear-gradient(135deg, #3b82f6, #1e40af);
}

.action-icon.inventory {
	background: linear-gradient(135deg, #f59e0b, #d97706);
}

.action-icon.reports {
	background: linear-gradient(135deg, #8b5cf6, #7c3aed);
}

.action-text {
	font-size: 22rpx;
	color: #475569;
	font-weight: 500;
}

/* 分类区域 */
.category-section {
	background: #fff;
	margin: 0 10rpx 12rpx;
	border-radius: 8rpx;
	padding: 20rpx;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
}

.section-header {
	margin-bottom: 16rpx;
}

.section-title {
	font-size: 28rpx;
	font-weight: 700;
	color: #2c3e50;
	margin-bottom: 4rpx;
	display: block;
}

.section-subtitle {
	font-size: 20rpx;
	color: #64748b;
}

.header-left {
	display: flex;
	align-items: center;
	gap: 8rpx;
}

.view-more {
	font-size: 22rpx;
	color: #3b82f6;
	font-weight: 500;
}

.category-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16rpx;
}

.category-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8rpx;
	padding: 12rpx 8rpx;
	border-radius: 8rpx;
	transition: all 0.3s ease;
}

.category-item:active {
	background: #f1f5f9;
	transform: scale(0.95);
}

.category-icon {
	width: 56rpx;
	height: 56rpx;
	border-radius: 12rpx;
	overflow: hidden;
	background: #e2e8f0;
}

.category-img {
	width: 100%;
	height: 100%;
}

.category-name {
	font-size: 22rpx;
	color: #475569;
	font-weight: 500;
	text-align: center;
}

/* 通知公告 */
.notice-section {
	background: #fff3cd;
	margin: 0 10rpx 12rpx;
	border-radius: 8rpx;
	padding: 12rpx 16rpx;
	border-left: 4rpx solid #ff6b35;
}

.notice-header {
	display: flex;
	align-items: center;
	gap: 8rpx;
}

.notice-content {
	flex: 1;
}

/* 促销区域 */
.promotion-section {
	background: #fff;
	margin: 0 10rpx 12rpx;
	border-radius: 8rpx;
	padding: 20rpx 20rpx 16rpx;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
}

.section-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 16rpx;
}

.promotion-scroll {
	width: 100%;
	white-space: nowrap;
}

.promotion-list {
	display: flex;
	gap: 12rpx;
	padding-bottom: 4rpx;
}

.promotion-card {
	position: relative;
	background: linear-gradient(135deg, #fee2e2, #fef3c7);
	padding: 16rpx;
	border-radius: 8rpx;
	min-width: 200rpx;
	border-left: 4rpx solid #ef4444;
}

.promo-badge {
	background: #dc2626;
	color: #fff;
	font-size: 18rpx;
	padding: 2rpx 8rpx;
	border-radius: 4rpx;
	margin-bottom: 8rpx;
	display: inline-block;
}

.promo-title {
	font-size: 24rpx;
	font-weight: 600;
	color: #991b1b;
	margin-bottom: 4rpx;
	display: block;
}

.promo-desc {
	font-size: 20rpx;
	color: #7c2d12;
}

/* 商品区域 */
.products-section {
	background: #fff;
	margin: 0 10rpx 12rpx;
	border-radius: 8rpx;
	padding: 20rpx;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
}

.products-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12rpx;
}

.product-card {
	position: relative;
	background: #f8fafc;
	border-radius: 8rpx;
	padding: 12rpx;
	transition: all 0.3s ease;
}

.product-card:active {
	background: #e2e8f0;
	transform: scale(0.98);
}

.product-image-wrapper {
	position: relative;
	margin-bottom: 8rpx;
}

.product-image {
	width: 100%;
	height: 120rpx;
	border-radius: 6rpx;
	object-fit: cover;
	background: #e2e8f0;
}

.hot-badge {
	position: absolute;
	top: 8rpx;
	right: 8rpx;
	background: linear-gradient(135deg, #ef4444, #dc2626);
	color: #fff;
	font-size: 16rpx;
	font-weight: 600;
	padding: 3rpx 6rpx;
	border-radius: 4rpx;
}

.product-info {
	position: relative;
}

.product-name {
	font-size: 24rpx;
	color: #2c3e50;
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	margin-bottom: 4rpx;
	display: block;
}

.product-spec {
	font-size: 20rpx;
	color: #64748b;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	margin-bottom: 2rpx;
	display: block;
}

.product-manufacturer {
	font-size: 18rpx;
	color: #94a3b8;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	margin-bottom: 8rpx;
	display: block;
}

.price-section {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.product-price {
	font-size: 26rpx;
	color: #ef4444;
	font-weight: 700;
}

.product-unit {
	font-size: 18rpx;
	color: #94a3b8;
}

.add-cart-btn {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 28rpx;
	height: 28rpx;
	background: #10b981;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
}

.add-cart-btn:active {
	transform: scale(0.9);
}

/* 服务保障 */
.service-section {
	background: #fff;
	margin: 0 10rpx 12rpx;
	border-radius: 8rpx;
	padding: 16rpx 20rpx;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
}

.service-grid {
	display: flex;
	justify-content: space-between;
}

.service-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6rpx;
}

.service-text {
	font-size: 20rpx;
	color: #64748b;
	font-weight: 500;
}

.bottom-safe {
	height: 60rpx;
}
</style>
